import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TextInput, FlatList, TouchableWithoutFeedback } from "react-native";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import CustomerHeader from "../../widget/customerHeader";
import TopicCell from "../community/TopicCell";
import PropTypes from "prop-types";
import { width } from "../../util/apdater_util";

class MyFavorCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.tabBox}>
              <Text style={[styles.tab,i === this.props.activeTab?{fontSize:14,color:'#222222',fontWeight:'500'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
              {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        })}
        <View style={styles.bottomLine}></View>
      </View>
    );
  }
}

export default class MyFavor extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.state={
      dataList:[{
        label:'1',
        value:1
      },{
        label:'2',
        value:2
      }],
      tabList:[{
        label:'动态',
        index:1
      },{
        label:'资讯',
        index:2
      },{
        label:'知识',
        index:3
      }]
    }
  }

  onChangeTab(obj){
    console.log(obj)
  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)
  }

  _renderTopicCell(){
    return (
      <TopicCell></TopicCell>
    )
  }

  _renderInfoCell(){
    return (
      <TouchableWithoutFeedback>
        <View style={styles.information}>
          <View style={styles.infoLeft}>
            <Text style={{color:'#0F0F0F',fontSize:15,lineHeight:20}} numberOfLines={2}>国足团队约75人前往多哈 12强赛
              开始前不安排热身赛 </Text>
            <View style={styles.infoFooter}>
              <Text style={{color:'#A6A6A6',fontSize:11}}>小报君</Text>
              <Text style={{color:'#A6A6A6',fontSize:11,marginLeft:20}}>4小时前</Text>
            </View>
          </View>
          <Image style={styles.infoPic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  _renderKnowledgeCell(info){
    return (
      <TouchableWithoutFeedback>
        <View style={[styles.cell,info.index%2==0?{marginRight:6}:{marginLeft:6}]}>
          <Image style={styles.logo} source={require('../../img/classroom.png')}></Image>
          <Text style={styles.title} numberOfLines={2}>人力资源管理六大模块知 识讲解</Text>
          <Text style={styles.num}>21人已学习</Text>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  _renderItemSeparator(){
    return (
      <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
    )
  }

  render() {
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader style={styles.nav} showLine={false} title={'赞与收藏'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
          <View style={{flex:1}}>
            <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
              (position) => {
                console.log('滑动时的位置：' + position);
              }
            } locked={false} renderTabBar={()=><MyFavorCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
              <View tabLabel='Tab1' style={{flex: 1}}>
                <View style={{flex:1 ,width:'100%'}}>
                  <FlatList data={this.state.dataList}
                            ItemSeparatorComponent={this._renderItemSeparator}
                            renderItem={this._renderTopicCell} keyExtractor={(item)=>item.value}></FlatList>
                </View>
              </View>
              <View tabLabel='Tab2' style={{flex: 1}}>
                <View style={{flex:1 ,width:'100%'}}>
                  <FlatList data={this.state.dataList}
                            renderItem={this._renderInfoCell} keyExtractor={(item)=>item.value}></FlatList>
                </View>
              </View>
              <View tabLabel='Tab3' style={{flex: 1,backgroundColor:'#fff'}}>
                <View style={{flex:1 ,width:'100%'}}>
                  <FlatList data={this.state.dataList}
                            style={styles.table}
                            numColumns={2}
                            keyExtractor={item=>item.value}
                            renderItem={this._renderKnowledgeCell}
                            keyExtractor={(item)=>item.value}></FlatList>
                </View>
              </View>
            </ScrollableTabView>
          </View>
        </View>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  /**tab**/
  tabs:{
    height:40,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center'
  },
  tabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center',
    flex:1
  },
  tab:{
    color: '#666666',
    fontSize: 14,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:0,
  },

  /*资讯*/
  information:{
    flexDirection:'row',
    justifyContent:'flex-start',
    backgroundColor:'#fff',
    height:95,
    paddingLeft:14,
    paddingRight:14,
    paddingTop:15
  },
  infoLeft:{
    flex:1,
    marginRight:22
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:10
  },
  infoPic:{
    height:65,
    width:97,
    borderRadius:7
  },

  /*子组件*/
  cell:{
    paddingTop: 20,
    width:(width-46)/2.0
  },
  logo:{
    width:'100%',
    height:92,
    borderRadius: 7
  },
  title:{
    color:'#0F0F0F',
    fontSize: 13,
    fontWeight:'500',
    marginTop:11,
    lineHeight: 20
  },
  num:{
    color:'#959595',
    fontSize:11,
    marginTop: 12
  },
  table:{
    flex:1,
    paddingHorizontal: 17
  },
})
